
/**
 * 画柱状图
 *
 * @author  yangjinlai 20200217
 * zhaoying 20200827 从人事管理h5迁移至理顾宝-资产配置
 */


//图表的默认配置
import drawEcharts from './drawEcharts.js'

//图表所需颜色的默认配置
import drawColor from './drawColor.js'

//that -- 传进来的Vue，也就是this
//options -- 传进来的各种配置，必传的参数包括：
	//id -- 图表容器
	//sData -- 画饼图的数据
	//html -- 饼图中间的数据
//非必传的参数：
//grid、legend等都可以传进来，重置默认配置
function drawPie( that, options ){

	let defaultSeries = {
        type: 'pie',
        radius: ['35%', '50%'],
        center: ['50%', '50%'],
        top: options.pieTop ? options.pieTop : '0',
        left: '5%',
        right: '5%',
        // bottom: options.bottom ? options.bottom : '5%',
        label: {
			show:  true,
            position: options.position ? options.position : 'outside',
			//因为各个饼图的formatter基本都不一样，这里就定义一个基本的{a} {b} {c}
			//和这个不一样的话，需要从外部传进来
            formatter: options.formatter ? options.formatter : '{c}\n{b}',
			fontSize: options.labelFontSize ? options.labelFontSize :this.$fontSize(0.18),
//             fontSize: this.$fontSize(0.18),
			color: '#9A9798',
        },
		labelLine: {
			show: true,
			length: options.labelLineLength ? options.labelLineLength :  22,
			length2: options.labelLineLength2 ? options.labelLineLength2 : 5,
			// smooth: true,
			lineStyle: {
				color: '#9A9798'
			}
		},
		minAngle: options.needMinAngle ? options.needMinAngle : 0,
		// minAngle: options.needMinAngle ? 1 : 0,
		hoverOffset: 2,
		selectedOffset: 2
	}


	if( defaultSeries.label.position != 'outside'){
		defaultSeries.label.color = '#fff'
	}

	// 用来判断是否显示外线
	if(options.showLine =='false'){
		defaultSeries.label.show = false;
		defaultSeries.labelLine.show = false;
	}



	let obj = {
	    color: options.color ? drawColor.pieColor[options.color] : drawColor.pieColor.type_1,
	    // grid: options.grid ? options.grid : {},
	    legend: {},
		series: [],
	    title: {
	    	show: true,
			text: options.html ? options.html : '',
			left:'center',
			top: options.top ? options.top :'37%',
	    	textStyle: {
	    		color: options.titleColor ? options.titleColor : '#FD5C20',
	    		fontSize: options.fontSize ? options.fontSize : this.$fontSize(0.3),
	    	}

	    },
	};

	//将obj和drawEcharts合并
	let echartsObj = that.$utils.objCombine({} , drawEcharts.defaultObj( that ) );

	//饼图区域小的时候
	if(options.smallPie && options.sData.length == 1) {

		echartsObj.legend.formatter = function (params) {

			let data = options.sData[0].data.filter(function(i, index){
				return i.name == params;
			})

			if( !(options.title && options.title.text == '暂无数据')){
				if( data && data.length ){
					data = data[0].value
				}
				params = data + '\n' + params;

				//图和文字底部对齐
				let tmp = params.split('\n');
				let res = params + '';
				for (var i in tmp) {
				    res = res.replace(tmp[i], '');
				}
				params = params + res ;
			}
			// params = data + '\n' + params;

            //图和文字底部对齐
            // let tmp = params.split('\n');
            // let res = params + '';
            // for (var i in tmp) {
            //     res = res.replace(tmp[i], '');
            // }
            return params ;
        }

        if( !(options.title && options.title.text == '暂无数据')){
       		echartsObj.legend.bottom = '-10';
       	}
        // echartsObj.legend.itemGap = 20;
	}

	//合并legend
	echartsObj.legend = that.$utils.objCombine(echartsObj.legend , options.legend );

	echartsObj = that.$utils.objCombine(echartsObj , obj );

	//合并title
	if( options.title ){

		echartsObj.title = that.$utils.objCombine(echartsObj.title , options.title );

		if( !options.title.text ){
			echartsObj.title.show = false;
		}
	}

	//合并series
	options.sData.forEach((item, index, arr) => {

		let sConfig = that.$utils.objCombine( defaultSeries, item );
		var color;
		if(item.color){
			if(item.color instanceof Array){
				color = item.color;
			}else{
				color = drawColor.pieColor[item.color];
			}
			sConfig.data.forEach((x,y,z)=>{
				!x.itemStyle && (x.itemStyle = {});
				color[y] && (x.itemStyle.color = color[y]) ;
			})
		}

		if(item.showLine=='false'){
			sConfig.label.show = false;
			sConfig.labelLine.show = false;
		}
		// let color = item.color ? drawColor.pieColor[item.color] : drawColor.pieColor.type_1;

		if( echartsObj.legend.show ){
			sConfig.bottom = '10%'
			// sConfig.bottom = this.$fontSize(0.9);
		}

		sConfig.silent = item.silent === false ? false : true;

		echartsObj.series.push(sConfig);

	})

	//如果饼图有2层，且数据的百分比类似的话，将里面的饼图转个90度
	//目前饼图最多只有2层，就按2层算
	//经过尝试，假如第一个饼图，左边数据的占比为20%
	//那么第二个饼图的左边数据的占比，不可以在14-26%之间，否则就会重叠，即上下相差0.6
	//所以如果在这个区间内了，就把第二个饼图旋转90度
	//如果每条的数据又一个为0，线为竖向的
	//如果有一条的数据都为0，线为横向的
	//如果有某一条的数据只有一个，线是在下面的
	if( echartsObj.series.length == 2 &&
		echartsObj.series[0].label.position == 'outside' &&
		echartsObj.series[1].label.position == 'outside'
		 ){
		let percentArr = [];

		echartsObj.series.forEach((i, index, arr) =>{
			if( i.data){
				if( i.data.length == 2 ){
					if( i.data[0].value == 0 || i.data[1].value == 0){
						//如果每条的数据又一个为0，线为竖向的
						percentArr.push(0)
					}
					else if( i.data[0].value == 0 && i.data[1].value == 0 ){
						//如果有一条的数据都为0，线为横向的
						percentArr.push(0.5)
					}
					else{
						//正常情况
						percentArr.push( Number(i.data[0].value) / Number(i.data[1].value))
					}
				}
				else if( i.data.length == 1){
					//如果有某一条的数据只有一个，线是在下面的
					percentArr.push(0)
				}
			}
		})

		if( ( (percentArr[0] + 0.6) > percentArr[1]) || ( (percentArr[0] - 0.6) < percentArr[1]) ){
			//在这个区间内
			echartsObj.series[1].startAngle = 180;
		}
	}


	//如果需要给饼图的label设置背景色
	if( options.pieLabelBg ){

		//因为rich里不能直接给这个label设置背景色，所以需要循环设置rich
		//formatter里返回的字符串也需要和rich对应上才行

		//循环数据，给每一条数据配上和索引相对应的颜色
		echartsObj.series.forEach((item, index, arr) => {

			let richObj = {};

			item.data.forEach((item2,index2,arr)=>{

                // 公共label的宽度不能给固定值，会导致数据溢出label框，现根据数据的长度计算宽度
                let font24 = this.$fontSize(0.24);
                let font25 = this.$fontSize(0.25);
                let widthNum = this.$fontSize(0.8);
                if (item2.name.length > (item2.value.length / 2)) {
                    widthNum = item2.name.length * font24 + font24;
                }
                else if (item2.name.length == (item2.value.length / 2)) {
                    widthNum = item2.name.length * font25 + font25;
                }
                else {
                    widthNum = (item2.value.length / 2) * font25 + font25;
                }

				//公共的label的样式
				let basicObj = {
					// backgroundColor: echartsObj.color[index2],
					backgroundColor: item2.itemStyle && item2.itemStyle.color ? item2.itemStyle.color : echartsObj.color[index2] ,
					color: '#fff',
					width: widthNum,
					// width: this.$fontSize(0.8),
					fontSize: this.$fontSize(0.24),
					align: 'center',
					borderRadius: [4, 4, 0, 0],
				}

				//label中，上面一行，数字的样式
				richObj['index_' + index2 + '_1'] = that.$utils.objCombine( basicObj, {
					verticalAlign: 'bottom',
					padding: [ this.$fontSize(0.04), 0,this.$fontSize(0.04),0],
					height: this.$fontSize(0.2),
					lineHeight: this.$fontSize(0.08),
					borderRadius: [4, 4, 0, 0],
					//因为上下两行中间不是完全挨着，露出了一条缝能看到底色，这里用阴影修补下
					shadowColor: item2.itemStyle && item2.itemStyle.color ? item2.itemStyle.color : echartsObj.color[index2] ,
					shadowBlur: 1,
					shadowOffsetY: 1,
				})

				//label中，下面一行，文字的样式
				richObj['index_' + index2 + '_2'] = that.$utils.objCombine( basicObj, {
					verticalAlign: 'top',
					padding: [ this.$fontSize(0.04), 0,0,0],
					height: this.$fontSize(0.3),
					lineHeight: this.$fontSize(0.1),
					borderRadius: [0, 0, 4, 4]
				})
			})

			item.label.rich = richObj;

			//因为目前饼图需要底色的只有一个，所以这里默认的formatter直接按照这个格式做了
			item.label.formatter = (options.formatter ? options.formatter : function(params) {
                //每一块对应的北京颜色不一样，按照index设置不一样的rich属性
                return '{index_'+params.dataIndex+'_1|'+params.value + '}' + '\n{index_'+params.dataIndex+'_2|'+ params.name + '}'
			})
		})

	}

	//需要干扰饼图的旋转角度
	if( options.calPie && options.calPieIndex){

		//如果有这条
		if( echartsObj.series[options.calPieIndex] ){

			let qData = echartsObj.series[options.calPieIndex].data;

			// console.log( 'qData', qData)

			let nArr = [];

			let allData = 0;

			qData.forEach((t,y,u) =>{

				let num = t.value;

				if( num.indexOf('%') != -1 || num.indexOf(',') != -1 || num.indexOf('，') != -1){
					num = num.replace('%', '').replace(',', '').replace('，', '');
				}

				let n = Number(num);

				let v = n == 0 ? 1 : n;

				nArr.push({
					value: v
				});

				allData += v;
			})

			let perState = 0,
				tNum = 0,
				bNum = 0,
				qStartAngle = 90;

			let tlNum = 0,
				trNum = 0,
				blNum = 0,
				brNum = 0;

			//从竖直的位置开始计算，每个元素所占的位置
			nArr.forEach((x,y,z) =>{

				let num = x.value ;

				let per = (num * 10000 / allData * 10000 / 10000 / 10000).toFixed(10);

				x.beginState = perState;

				perState += Number(per);

				x.lastState = perState;

				if( x.beginState <= 0.25 && x.lastState < 0.25 ){
					//右上
					x.perState = 'topRight';
					trNum += 1;
				}
				else if( x.beginState >= 0.75 && x.lastState > 0.75 ){
					//左上
					x.perState = 'topLeft';
					tlNum += 1;
				}
				// else if(x.beginState > 0.25 && x.lastState < 0.5){
				// 	//右下
				// 	x.perState = 'bottomRight';
				// 	brNum += 1;
				// }
				// else{
				// 	//左下
				// 	x.perState = 'bottomLeft';
				// 	blNum += 1;
				// }

				// if( (x.beginState < 0.25 && x.lastState < 0.25) || (x.beginState > 0.75 && x.lastState > 0.75)){
				// 	x.perState = 'top';
				// 	tNum += 1;
				// }
				// else {
				// 	//元素位置在下半部分
				// 	x.perState = 'bottom';
				// 	bNum += 1;
				// }

			})

			// console.log('nArr', nArr);

			let naLength = Math.ceil( nArr.length * 1 / 2 );

			// console.log('naLength', naLength);

			if( trNum && trNum > naLength ){
				//大部分右上
				qStartAngle = 0;
			}
			else if( tlNum && tlNum > naLength ){
				//大部分在左上
				qStartAngle = 180;
			}


			// if( tNum && tNum > nArr.length * 3 /4 ){
			// 	//大部分右上
			// 	qStartAngle = 0;
			// }
			// else if( tlNum && tlNum > nArr.length * 3 /4 ){
			// 	//大部分在左上
			// 	// qStartAngle = 180;
			// }

			// console.log('qStartAngle', qStartAngle)

			echartsObj.series.forEach((q,w,e) =>{
				q.startAngle = qStartAngle;
			})
		}
	}

	// 计算当前图例展示时，是否折行了
	if( options.legend && options.legend.show && options.legend.data ){

		//判断当前屏幕是否能一行放的下所有legend
		//一行legend，包括data的每一个值及前面的图标及后面的间距（柱状有间距，折线的没有）
		let wrapperWidth = options.id.getDom().offsetWidth - 10 - 10;

		let char = '';

		let data = options.legend.data ;

		data.forEach((x,y,z) =>{
			char += 'x' + x ;
			// if( (y+1) != data.length){
				// char += 'xx';
			// }
		})

		//所有legend的长度总和
		let fontNum = Number(char.length) * Number(that.$fontSize(0.24));

		if( wrapperWidth < fontNum ){
			//一行放不下，计算需要放几行

			let dLegend = echartsObj.legend;

			// echartsObj.legend = [];

			let realData = [];
			let newChar = '';
			options.line = 0;
			let mc = '';

			data.forEach((x,y,z) =>{
				newChar += 'x' + x ;

				mc += 'x' + x ;

				if( (y+1) != data.length){
					//加上后一个
					mc += data[y+1]  ;
					// newChar += 'xx';
				}

				realData.push(x);

				//到这里超出了，需要另起一行
				if( Number(mc.length) * 14 > wrapperWidth ){

					// !echartsObj.legend[options.line] && (echartsObj.legend[options.line] = {});

					// echartsObj.legend[options.line].data = realData.concat([]);

					// echartsObj.legend[options.line] = that.$utils.objCombine( dLegend, echartsObj.legend[options.line] );

					// echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], leg );

					realData = [];
					mc = '';
					newChar = '';
					options.line += 1;

				}
				else{
					//没有超出，但是如果后面没其他的了
					if( (y+1) == data.length){

						// !echartsObj.legend[options.line] && (echartsObj.legend[options.line] = {});

						// echartsObj.legend[options.line].data = realData.concat([]);
						// // echartsObj.legend[options.line].top = that.$fontSize(0.4);

						// echartsObj.legend[options.line] = that.$utils.objCombine( dLegend, echartsObj.legend[options.line]  );

						// echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], leg );

						options.line += 1;

					}
				}
			})

		}
		// else{
			// echartsObj.legend.data = data;
			// echartsObj.legend = that.$utils.objCombine( echartsObj.legend, leg );
		// }

	}

	//展示图例，且gird.bottom的底部距离是没有legend的位置，且不需要展示table时
	if( options.legend && options.legend.show && echartsObj.grid.bottom == '5%' && !options.table){

		if( that.$utils.getType(echartsObj.legend) == 'Array' ){

			let gLine = options.line;

			let num = 0.35;

			// echartsObj.legend.forEach((x, y, z) => {
			// 	x.bottom = this.$fontSize(num) * options.line;
			// 	x.left = 10;
			// 	options.line -= 1;
			// 	// num -= 0.14;
			// })

			echartsObj.grid.bottom = this.$fontSize(0.4) * gLine ;
		}
		else{
			echartsObj.grid.bottom = this.$fontSize(0.9)
		}

		// echartsObj.grid.bottom = this.$fontSize(0.9) ;
	}

	// console.log( echartsObj);

	//画图
	options.id.setOption(echartsObj)

}

export default drawPie
